<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/creditsex.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/top.css">
    <title>Document</title>
</head>

<body>
    <!-- 创建标题容器 -->
    <div class="mycredits">
        <h1>
            我的积分:
            <span>#</span>
        </h1>
    </div>
    <!-- 创建一个外层容器 -->
    <div class="outer-wrapper" style="border: 1px solid white;">
        <div class="outer">
            <!-- 创建图片容器 -->
            <div class="img-wrapper">
                <!-- 设置图片 -->
                <img src="#" alt="">
            </div>
            <!-- 创建内容区容器 -->
            <div class="info">
                <h2 class="title">
                    小件抵用券
                </h2>
                <p class="intro">
                    可以抵用一次小件支付费用
                </p>
                <h3 class="category">
                    <i class="iconfont icon-jifen"></i>
                    所需积分：1000
                </h3>
            </div>
            <!-- 创建兑换按钮 -->
            <div class="button-wrapper">
                <span>
                    剩余数量:
                    <span>#</span>
                </span>

                <a href="#">
                    <input type="button" value="兑换" />
                </a>
            </div>

        </div>
        <div class="outer">
            <!-- 创建图片容器 -->
            <div class="img-wrapper">
                <!-- 设置图片 -->
                <img src="#" alt="">
            </div>
            <!-- 创建内容区容器 -->
            <div class="info">
                <h2 class="title">
                    小件加急抵用券
                </h2>
                <p class="intro">
                    可以抵用一次小件加急支付费用
                </p>
                <h3 class="category">
                    <i class="iconfont icon-jifen"></i>
                    所需积分：1500
                </h3>
            </div>
            <!-- 创建兑换按钮 -->
            <div class="button-wrapper">
                <span>
                    剩余数量:
                    <span>#</span>
                </span>

                <a href="#">
                    <input type="button" value="兑换" />
                </a>
            </div>

        </div>
        <div class="outer">
            <!-- 创建图片容器 -->
            <div class="img-wrapper">
                <!-- 设置图片 -->
                <img src="#" alt="">
            </div>
            <!-- 创建内容区容器 -->
            <div class="info">
                <h2 class="title">
                    大件抵用券
                </h2>
                <p class="intro">
                    可以抵用一次大件支付费用
                </p>
                <h3 class="category">
                    <i class="iconfont icon-jifen"></i>
                    所需积分：3000
                </h3>
            </div>
            <!-- 创建兑换按钮 -->
            <div class="button-wrapper">
                <span>
                    剩余数量:
                    <span>#</span>
                </span>

                <a href="#">
                    <input type="button" value="兑换" />
                </a>
            </div>

        </div>
        <div class="outer">
            <!-- 创建图片容器 -->
            <div class="img-wrapper">
                <!-- 设置图片 -->
                <img src="#" alt="">
            </div>
            <!-- 创建内容区容器 -->
            <div class="info">
                <h2 class="title">
                    大件加急抵用券
                </h2>
                <p class="intro">
                    可以抵用一次大件加急支付费用
                </p>
                <h3 class="category">
                    <i class="iconfont icon-jifen"></i>
                    所需积分：3500
                </h3>
            </div>
            <!-- 创建兑换按钮 -->
            <div class="button-wrapper">
                <span>
                    剩余数量:
                    <span>#</span>
                </span>

                <a href="#">
                    <input type="button" value="兑换" />
                </a>
            </div>
        </div>
    </div>
    <!-- 创建按钮 -->
    <div class="button">
        <a href="#">
            <input type="button" value="查看我的抵用券" />
        </a>
        <a href="index.jsp">
            <input type="button" value="返回" />
        </a>
    </div>
</body>

</html>